<template>
  <div :class="['page-right',this.collapse?'collapsePage':'']">
    <!--    折叠按钮-->
    <div class="arrow-view" >
      <!-- <img  v-if="!collapse" class="icon-arrow"  src="../../../../assets/bigScreen/arrow-right.png"  @click="collapsePage"> -->
      <!-- <img  v-else class="icon-arrow" src="../../../../assets/bigScreen/arrow-left.png"  @click="collapsePage"> -->
      <a-icon type="caret-right" v-if="!collapse" class="icon-arrow" @click="collapsePage"/>
      <a-icon type="caret-left" v-else class="icon-arrow"  @click="collapsePage"/>
    </div>

    <!--    数据区域-->
    <div class="content-data" >
      <div class="content-item">
        <div class="modal-title-container">
          <modal-title class="modal-title" title="各部门碳排放量"></modal-title>
        </div>
        <div class="content">
          <div id="chart1" ref="chart1" style="width: 100%; height: 100%"></div>
        </div>
      </div>
      <div class="content-item">
        <div class="modal-title-container">
          <modal-title class="modal-title" title="各点位平均温度"></modal-title>
        </div>
        <div class="content">
          <div id="chart2" ref="chart2" style="width: 100%; height: 100%"></div>
        </div>
      </div>
      <div class="content-item-new">
        <div class="modal-title-container">
          <modal-title class="modal-title" title="阈值报警统计"></modal-title>
        </div>
        <div class="content">
          <div class="top">
            <div class="number-view">
              <div class="number">{{ personNum }}</div>
              <div class="title">预警数量</div>
            </div>
            <div class="number-view">
              <div class="number">{{ carNum }}</div>
              <div class="title">报警数量</div>
            </div>
          </div>
          <div class="bottom">
            <div id="chart3" ref="chart3" style="width: 100%; height: 100%"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import modalTitle from "./ModalTitle";
import * as echarts from 'echarts'
import {getAction} from '@/api/manage';

export default {
  name: "ScreenRight",
  components: { modalTitle },
  data() {
    return {
      collapse: false, //是否折叠
      url:{
        list1: "/consumptionElectricity/consumptionElectricity/getScreenRightTop", //各部门碳排放量
        list2: "/temperature/temperature/getScreenRightMiddle", //各点位平均温度
        list3: "/guard/guardUser/countUserAndCarStay", //在厂数据实时统计接口-zjh改
      },
      chart1: null,
      chart2: null,
      chart3: null,
      personNum: 0, //人员数量
      carNum: 0, //车辆数量
      staffNum: 0, //正式员工数量
      supplierNum: 0, //承包商数量
    };
  },
  mounted() {
    this.getList1();
    this.getList2();
    // this.getList3();
    this.initData3();
    // 基于准备好的dom，初始化echarts实例
    window.addEventListener("resize", ()=>this.windowResize(), false);
    // 定时刷新数据
    const picker= setInterval(() =>{
      // this.getList1();
      // this.getList2();
      // this.getList3();
    }, 10000)
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once('hook:beforeDestroy', () => {
      clearInterval(picker)
    })
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.windowResize, false);
  },
  watch:{
    collapse(val) {
      this.$bus.$emit('collapseRightPage',this.collapse)
    }
  },
  methods:{
    windowResize() {
      if (this.chart1) {
        this.chart1.resize();
      }
      if (this.chart2) {
        this.chart2.resize();
      }
      if (this.chart3) {
        this.chart3.resize();
      }
    },
    collapsePage(){
      this.collapse=!this.collapse
      this.$bus.$emit('collapseRightPage',this.collapse)
    },
    getList1() {
      getAction(this.url.list1)
          .then((res) => {
            if (res.success) {
              this.$nextTick(() => {
                this.initData1(res.result);
              });
            }
          })
    },
    initData1(result) {
      let data = [];
      result.forEach((item, index) => {
        item.name = item.name ? item.name : "";
        item.value = item.value ? item.value : 0;
        data.push(item);
      });
      // console.log(data);
      // let data1 = result.unHandle ? result.unHandle : 0;
      // let data2 = result.handling ? result.handling : 0;
      // let data3 = result.closed ? result.closed : 0;
      // let data4 = result.alarmTotal ? result.alarmTotal : 0;

      let colorList=['#AB6FF5','#EA4E5C','#DED802',  '#34CC99', '#F7A900', '#8DBC00', '#1ACBDB', '#008FBB']
      if (!this.chart1) {
        this.chart1 = echarts.init(this.$refs.chart1);
      }
      this.chart1.setOption({
        tooltip: {
          trigger: "item",
        },
        graphic: {
          type: "text",
          left: "center",
          top: "37%",
          style: {
            // text: data4,
            fontSize: 24,
            fill: "#fff",
            textAlign: "center",
            width: 30,
            height: 30,
            fontWeight: 600,
          },
        },
        legend: {
          type:'scroll',
          orient:'horizontal',
          pageIconColor:'#fff',
          pageTextStyle:{
            color:'#64BCFF'
          },
          bottom: "5%",
          left:'center',
          icon: "rect",
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 10,
          textStyle:{
            color:'#64BCFF'
          },
          // formatter:function(name){  //该函数用于设置图例显示后的百分比
          //   let total = data4;
          //   let value=name==='未处理'?data1:(name==='处理中'?data2:data3);

          //   let p =((value / total) * 100).toFixed(1); //求出百分比
          //   return `${name} ${p}%`;  //返回出图例所显示的内容是名称+百分比
          // },
        },
        color: colorList,
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "40%"],
            avoidLabelOverlap: false,
            label: {
              show:false
            },
            emphasis: {
              label: {
                show: false,
              },
            },
            labelLine: {
              show: false,
            },
            data: data
          },
        ],
      });
    },
    getList2() {
      getAction(this.url.list2, {})
          .then((res) => {
            if (res.success) {
              this.$nextTick(() => {
                console.log(res.result);
                this.initData2(res.result);
              });
            }
          })
    },
    initData2(result) {
      let device = [];
      let data = [];
      result.forEach((item, index) => {
        item.deviceA = item.device ? item.device + "_A" : "";
        item.deviceB = item.device ? item.device + "_B" : "";
        item.deviceC = item.device ? item.device + "_C" : "";
        item.a = item.a ? item.a : 0;
        item.b = item.b ? item.b : 0;
        item.c = item.c ? item.c : 0;
        device.push(item.deviceA);
        device.push(item.deviceB);
        device.push(item.deviceC);
        data.push(item.a);
        data.push(item.b);
        data.push(item.c);
      });
      // let fireData = result.fire ? result.fire : 0;
      // let patrolData = result.patrol ? result.patrol : 0;
      // let cameraData = result.camera ? result.camera : 0;
      // let infraredData = result.infrared ? result.infrared : 0;
      // let perimeterData = result.perimeter ? result.perimeter : 0;
      // let accessData = result.access ? result.access : 0;
      // let soundData = result.sound ? result.sound : 0;

      if (!this.chart2) {
        this.chart2 = echarts.init(this.$refs.chart2);
      }
      this.chart2.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            return params[0].name + "：" + params[0].value +"℃";
          },
        },
        grid: {
          left: "7%",
          bottom: "8%",
          right: "18%",
          top: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          position: "bottom",
          min:0,
          max:100,
          axisLine: {
            show:false,
            lineStyle: {
              color: "#64BCFF",
              width: 0,
            },
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            formatter: "{value}",
          },
        },
        yAxis: {
          type: "category",
          data: device,
          axisLabel: {//y轴文字的配置
            color: "#64BCFF",
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          offset: 10,
        },

        series: [
          {
            type: "bar",
            barWidth : 8,
            data: data,
            label: {
              show: true,
              position: 'right',
              color:'#fff',
              fontSize:12,
              formatter: '{c}',
            },
            itemStyle: {
              borderRadius: [0,10,10,0],
              offset:0,
              //设置柱体渐变色
              //5个参数 前面的 0,0,0,1 分别表示为 右，下，左，上，1表示从上方开始
              //offset 范围是 0~1 表示位置 color为颜色
              color: new echarts.graphic.LinearGradient(
                  0, 0, 1, 0,
                  [
                    {offset: 0, color: '#3269F3'},
                    {offset: 1, color: '#43FFC4'}
                  ]
              )
            },
            smooth: true,
          },
        ],
      });
    },
    getList3() {
      getAction(this.url.list3, {})
          .then((res) => {
            if (res.success) {
              this.personNum = res.result.peopleCount; //人员数量
              this.carNum = res.result.carCount; //车辆数量
              this.$nextTick(() => {
                this.initData3(res.result);
              });
            }
          })
    },
    initData3(result) {
      let data1 = 0;
      let data2 = 0;

      if (!this.chart3) {
        this.chart3 = echarts.init(this.$refs.chart3);
      }
      this.chart3.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "4%",
          left: "center",
          icon: "rect",
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 30,
          textStyle: {
            color: "#64BCFF"
          },
        },
        color:  ["#546fc8", "#71c1dd"],
        series: [
          {
            type: "pie",
            radius: ["35%", "65%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 1,
            },
            label: {
              position: "inner",
              fontSize: 12,
              formatter: "{@2012}",
              color:'#fff'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              // { value: data1, name: "管道压流" },
              { value: data2, name: "配电柜点位" },
            ],
          },
        ],
      });
    },
  }
};
</script>

<style scoped lang="less">
//@bg-color-main:#03122ed6;
@bg-color-main:#001e4ce8;
.collapsePage {
  //width: 5px !important;
  right: calc(-20% + 5px) !important;
  background: transparent !important;
}

@media screen and (max-width: 1280px) {
  .collapsePage {
    right: calc(-260px + 5px) !important;
  }
}

.page-right {
  width: 20%;
  height: 89%;
  min-width: 260px;
  min-height: 750px;
  position: absolute;
  transform: translate(0px, 0px);
  right: 0;
  top: 11%;
  z-index: 10;
  background-color:@bg-color-main;
  //background: linear-gradient(90deg,#000f2a 4%,rgba(0,15,42,.8) 20%,rgba(0,15,42,.7) 65%,rgba(0,15,42,0) 95%);
  transition: all 0.1s ease-in-out;

  .arrow-view {
    width: 28px;
    height: 24px;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    position: absolute;
    left: -28px;
    top: 45%;
    background-color: @bg-color-main;
   cursor: pointer;
  }
  .icon-arrow {
    width: 100%;
    height: 100%;
    color: #fff;
  }

  .content-data {
    width: 100%;
    height: 100%;
    padding: 5px 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .content-item {
      width: 100%;
      height: 32%;
      // background-image: url("../../../../assets/bigScreen/areabg3.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .modal-title-container {
        width: 300px;
        height: 65px;
        .modal-title {
          width: 100%;
          height: 100%;
        }
      }

      .content {
        width: 100%;
        height: calc(100% - 35px);
        color: #fff;
      }
    }
    .content-item-new{
      width: 100%;
      height: 32%;
      // background-image: url("../../../../assets/bigScreen/areabg1.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      .modal-title-container {
        width: 300px;
        height: 48px;
        .modal-title {
          width: 100%;
          height: 100%;
        }
      }
      .content {
        width: 100%;
        height: calc(100% - 35px);
        color: #fff;
        position: relative;

        .top{
          width: 100%;
          height: auto;
          position: absolute;
          top: 10px;
          left: 0;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          padding: 0 12px;
          box-sizing: border-box;

          .number-view{
            width: 80px;
            height: 50px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            // background-image: url("../../../../assets/bigScreen/areabg2.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            padding-left: 10px;
            box-sizing: border-box;

            .number{
              font-size: 16px;
              color: #F6FF64;
            }
            .title{
              font-size: 12px;
              color: #64BCFF ;
            }

          }
        }
        .bottom{
          width: 100%;
          height: 100%;}
      }
    }
  }
}
</style>